import React, { useState, useRef, useEffect } from 'react';
import { Table, Card } from 'antd';
import { getAll } from '@/services/StudentAnalysisCounsellor';
import styles from './index.less';
import { useMount } from 'ahooks';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import type { ColumnsType } from 'antd/es/table/interface';
import { connect } from 'umi';
import { FormInstance } from 'antd/lib/form';
interface DataType {
  key: string;
  id: number; //序号
  stuName: string;
  stuNumber: string;
  instructorName: string;
  score: number;
  gpa: number;
  credit: number;
  majorRank: number;
}

const ScoreList: React.FC<any> = (props) => {
  const [records, setRecords] = useState<any>([]);
  const [res, setRes] = useState<any>([]);

  const formRef = useRef<FormInstance>(null);

  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getStudentScoreEffect',
        payload: {
          data: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            console.log(value);
            setRecords(value);
          },
        },
      });
    }
  };
  useEffect(() => {
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);
  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let stuName = values.stuName;
    let instructorName = values.instructorName;
    //过滤逻辑
    setRes(records);
    let filteredData = records.filter((item: DataType) => {
      if (stuName && !item.stuName.includes(stuName)) {
        return false;
      }
      if (instructorName && !item.instructorName.includes(instructorName)) {
        return false;
      }
      return true;
    });

    // let filteredData = records.filter((item:any) => (item?.stuName && item.stuName.includes(stuName)
    // ||  (instructorName && item.instructorName.includes(instructorName))))
    // // // 更新结果
    setRecords(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setRecords(res); // 重置为初始数据
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'stuName',
      key: 'stuName',
      align: 'center',
    },
    {
      title: '学号',
      dataIndex: 'stuNumber',
      key: 'stuNumber',
      align: 'center',
    },
    {
      title: '辅导员',
      dataIndex: 'instructorName',
      key: 'instructorName',
      align: 'center',
      onFilter: (value: string, record) =>
        record.instructorName.includes(value),
    },
    {
      title: '平均成绩',
      dataIndex: 'score',
      key: 'score',
      align: 'center',
    },
    {
      title: '平均学分绩点',
      dataIndex: 'gpa',
      key: 'gpa',
      align: 'center',
    },
    {
      title: '加权学分成绩',
      dataIndex: 'credit',
      key: 'credit',
      align: 'center',
    },
    {
      title: '排名',
      dataIndex: 'majorRank',
      key: 'majorRank',
      align: 'center',
    },
  ];

  return (
    <div className={styles.content}>
      <div className={styles.bar}>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              学生课堂成绩列表
            </span>
          }
        >
          <ProForm
            layout="inline"
            onFinish={searchOnFinish}
            onReset={handleReset}
          >
            <ProFormText
              label="姓名"
              name="stuName"
              placeholder="请输入学生姓名"
              width={160}
            />
            <ProFormText
              label="辅导员"
              name="instructorName"
              placeholder="请输入辅导员姓名"
              width={160}
            />
          </ProForm>
        </Card>
      </div>
      <div className={styles.list}>
        <Card>
          <Table columns={columns} dataSource={records} />
        </Card>
      </div>
    </div>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(ScoreList);
